import React from "react"
import {Button} from "antd-mobile"
import Header from "../header/index"
import "./address.css"
import {getUserAddress,isLogin,delUserAddress} from "../../api/index"
class Address extends React.Component{
    constructor(){
        super()
        this.state={
            Address:[],
            uid:""
        }
    }
    componentDidMount(){
        isLogin().then(res=>{
            console.log(res.data)
            if(!res.data.avatar){
                this.props.history.push("/login")
            }else{
                  console.log(res.data.id)
                  this.setState({
                       uid:res.data.id
                  })
                  getUserAddress(res.data.id).then(res=>{
                    //   console.log(res)
                      this.setState({
                        Address:[...res.data],  
                      })
                  })
            }
        })
    }
    delAddr(id){
        console.log(this.state.Address.indexOf(this.state.Address.find(item=>item.id==id)))
        console.log()
        
        delUserAddress(this.state.uid,id).then(
            res=>{
                this.state.Address.splice(this.state.Address.indexOf(this.state.Address.find(item=>item.id==id)),1)
                this.setState({})
                   
            }
        )
    }
    addaddress(){
        this.props.history.push("/mine/userInfo/address/add")
    }
    render(){
        console.log(this.state.Address)
        let {Address} = this.state
        return(
            <div>
                <Header title={"收货地址"}/>
                <div className="userInfo-mask"></div>
                {Address.map(item=>{
                    return(
                            <div className="getUserAddress-item" key={item.id}>
                                                <div className="getUserAddress-item-left">
                                                    <div className="getUserAddress-item-left-top">
                                                        <span className={item.tag_type==2?"getUserAddress-item-left-tagblue":item.tag_type==3?"getUserAddress-item-left-tagOrange":"getUserAddress-item-left-taggreen"}>{item.tag}</span>
                                                        <div className="getUserAddress-item-left-name">{item.address}</div>
                                                       
                                                    </div>
                                                    <div className="getUserAddress-item-left-middle">{item.address_detail}</div>
                                                    <div className="getUserAddress-item-left-bottom">{item.phone}</div>
                                                </div>
                                                <div className="getUserAddress-item-right" onClick={this.delAddr.bind(this,item.id)}></div>
                            </div>
                    )
                })}
                <Button className="getUserAddress-toAdd" onClick={this.addaddress.bind(this)}>新增地址</Button>
                
            </div>
        )
    }
}

export default Address